<template>
  <div>
    <div id="watch-example">
      <p>
        Ask a yes/no question:
        <input v-model="question">
      </p>
      <p>{{ answer }}</p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import _ from "lodash"
export default {
  name: 'VueWatch',
  data() {
      return {
          question: '',
          answer: 'I cannot give you an answer until you ask a question'
      }
  },
  watch: {
      question: function(newQuestion){
          this.answer = 'Waition for you to stop typing...'
          this.getAnswer()
      }
  },
  methods: {
      // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        this.answer = 'Thinking...'
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            this.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数
      2000
    )
    // getAnswer:function(){
    //   if (this.question.indexOf('?') === -1) {
    //     this.answer = 'Questions usually contain a question mark. ;-)'
    //       return
    //   }
    //   this.answer = 'Thinking...'
    //   axios.get('https://yesno.wtf/api')
    //       .then(function (response) {
    //         this.answer = _.capitalize(response.data.answer)
    //       })
    //       .catch(function (error) {
    //         this.answer = 'Error! Could not reach the API. ' + error
    //       })
    //   }
    }
}
</script>

